<template>
  <div class="wrap">
    <el-dialog
      title="选择试轴器"
      :visible.sync="testerDialog.showDialog"
      width="30%"
    >
      <div>
        <el-input placeholder="请输入内容" v-model="input2">
          <el-button slot="append" icon="el-icon-search"></el-button>
        </el-input>
      </div>
      <el-pagination background layout="prev, pager, next" :total="1000">
      </el-pagination>
      <span slot="footer" class="dialog-footer">
        <el-button @click="testerDialog.showDialog = false">取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </span>
    </el-dialog>
    <div class="button-row">
      <el-button type="success" @click="returnList">返回键盘列表</el-button>
    </div>
    <div class="info">
      <div class="row">
        <span class="desc">键盘配列：</span>
        <span class="value">{{ typeDesc }}</span>
        <span class="desc">创建人：</span>
        <span class="value">{{ userName }}</span>
        <span class="desc">创建时间：</span>
        <span class="value">{{ createTime }}</span>
      </div>
      <div class="row">
        <span>键盘名称：</span>
        <el-input
          v-model="name"
          placeholder="请输入内容"
          class="name-input"
        ></el-input>
        <el-checkbox v-model="open" label="是否公开" border></el-checkbox>
        <el-button type="primary" @click="saveChange">保存修改</el-button>
        <el-button type="danger" @click="applyAllKeyboard"
          >应用全部轴体</el-button
        >
        <el-button type="info" @click="openTesterDialog"
          >从试轴器加载</el-button
        >
      </div>
    </div>
    <div class="keyboard">
      <layout104 :id="id" :editable="true" v-if="type === 104" :key="key" />
      <layout108
        :id="id"
        :editable="true"
        v-else-if="type === 108"
        :key="key"
      />
      <layout87 :id="id" :editable="true" v-else-if="type === 87" :key="key" />
      <layout61 :id="id" :editable="true" v-else-if="type === 61" :key="key" />
      <layout63 :id="id" :editable="true" v-else-if="type === 63" :key="key" />
      <layout64 :id="id" :editable="true" v-else-if="type === 64" :key="key" />
      <layout68 :id="id" :editable="true" v-else-if="type === 68" :key="key" />
      <layout84 :id="id" :editable="true" v-else-if="type === 84" :key="key" />
      <layout96 :id="id" :editable="true" v-else-if="type === 96" :key="key" />
      <layout980
        :id="id"
        :editable="true"
        v-else-if="type === 980"
        :key="key"
      />
    </div>
  </div>
</template>
<script>
import { Button, Input, Checkbox, Dialog, Pagination } from "element-ui";

import Layout104 from "../components/Layout104";
import Layout108 from "../components/Layout108";
import Layout87 from "../components/Layout87";
import Layout61 from "../components/Layout61";
import Layout63 from "../components/Layout63";
import Layout64 from "../components/Layout64";
import Layout68 from "../components/Layout68";
import Layout84 from "../components/Layout84";
import Layout96 from "../components/Layout96";
import Layout980 from "../components/Layout980";

import {
  getAdminKeyboardDetailInfo,
  updateAdminKeyboard,
  applyAdminAllKeyboardSwitch,
} from "@/api/admin-keyboard.js";

export default {
  name: "keyboard-edit",
  components: {
    [Button.name]: Button,
    [Input.name]: Input,
    [Checkbox.name]: Checkbox,
    [Dialog.name]: Dialog,
    [Pagination.name]: Pagination,
    Layout104,
    Layout108,
    Layout87,
    Layout61,
    Layout63,
    Layout64,
    Layout68,
    Layout84,
    Layout96,
    Layout980,
  },
  data() {
    return {
      id: null,
      key: 0,
      name: null,
      open: null,
      type: null,
      typeDesc: "",
      userName: "",
      createTime: "",
      testerDialog: {
        showDialog: false,
      },
    };
  },
  methods: {
    returnList() {
      this.$router.push({ path: "/backend/keyboard" });
    },
    getInfo() {
      getAdminKeyboardDetailInfo(this.id)
        .then((res) => {
          this.name = res.name;
          this.open = res.open;
          this.type = res.type;
          this.typeDesc = res.typeDesc;
          this.userName = res.userName;
          this.createTime = res.createTime;
        })
        .catch((errMsg) => this.$alert(errMsg.msg));
    },
    saveChange() {
      updateAdminKeyboard({
        id: this.id,
        name: this.name,
        open: this.open,
      })
        .then((res) => {})
        .catch((errMsg) => this.$alert(errMsg));
    },
    applyAllKeyboard() {
      this.$confirm("确定修改键盘全部轴体?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          applyAdminAllKeyboardSwitch(this.id)
            .then((res) => {
              this.getInfo();
              this.key++;
            })
            .catch((errMsg) => this.$alert(errMsg.msg));
        })
        .catch(() => {});
    },
    openTesterDialog() {
      this.testerDialog.showDialog = true;
    },
  },
  mounted() {
    this.id = this.$route.params.id;
    this.getInfo();
  },
};
</script>
<style lang="stylus" scoped>
.wrap {
  .info {
    margin-top: 10px;

    .row {
      margin-bottom: 10px;

      .desc {
        font-size: 18px;
        color: #444;
        display: inline-block;
      }

      .value {
        font-size: 20px;
        display: inline-block;
        margin-right: 20px;
        background-color: #ccc;
      }

      .name-input {
        width: 300px;
      }
    }
  }

  .keyboard {
    background-color: #ccc;
    width: 100%;
    background-position: right bottom, left top;
  }
}
</style>